<template>
  <div id="bottomLeft">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span><icon name="chart-bar" class="text-icon"></icon></span>
        <div class="fs-xl text mx-2">营收统计</div>
      </div>
      <div class="tuli">
        <div class="tabBtn">
          <div
            v-for="item in tabRevenue"
            :key="item.label"
            :class="{ active: cur == item.cur_revenue }"
            v-on:click="selectRevenueTable(item.cur_revenue)"
          >
            {{ item.label }}
          </div>
        </div>
        <div id="panel-inpanel" class="legend-revenue">
          <!-- 营收 -->
          <div>
            <span class="span-round-rect"></span>
            <span>应收: {{ sumShouldMoney }}元</span>
            <span>({{ countShould }}笔)</span>
          </div>

          <div>
            <span class="span-round-rect1"></span>
            <span>实收: {{ sumRealityMoney }}元</span>
            <span>({{ countReality }}笔)</span>
          </div>

          <div style="padding-left: 20px">
            <span>未收: {{ sumShouldButNotMoney }}元</span>
            <span>({{ countShoutButNot }}笔)</span>
          </div>
        </div>
      </div>
      <!-- 营收图表 -->
      <div id="chart-revenue"></div>
    </div>
    <div class="bg-color-black mt-2">
      <!-- <div class="tabBtn">
        <div
          v-for="item in tabStatistics"
          :key="item.label"
          :class="{ active: cur == item.cur_statistics }"
          v-on:click="selectRevenueTable(item.cur_statistics)"
        >
          {{ item.label }}
        </div>
      </div> -->
       <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">停车区统计</span>
        </div>
      </div>
      <div>
        <!-- 统计图表 -->
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
import Qs from "qs";
export default {
  data() {
    return {
      revenueChart: undefined,
      revenueIndex: 0,
      cur: 1,
      tabRevenue: [
        {
          label: "当日营收",
          cur_revenue: 1,
        },
        {
          label: "当月营收",
          cur_revenue: 2,
        },
        {
          label: "当年营收",
          cur_revenue: 3,
        },
      ],
      tabStatistics: [
        {
          label: "当日统计",
          cur_statistics: 1,
        },
        {
          label: "当月统计",
          cur_statistics: 2,
        },
        {
          label: "当年统计",
          cur_statistics: 3,
        },
      ],
      sumShouldMoney: "", // 应收
      sumRealityMoney: "", //实收
      sumShouldButNotMoney: "",
      countShould: "",
      countReality: "",
      countShoutButNot: "",
      config: {
        header: ["停车区", "停车点数", "车位总数", "实收金额", "应收金额"],
        data: [],
        rowNum: 3, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        // index: true,
        // columnWidth: [50],
        align: ["center"],
      },
    };
  },
  methods: {
    drawRevenue(xAxisData, dataShould, dataShouldButNot) {
      let dom = document.getElementById("chart-revenue");
      this.revenueChart = echarts.init(dom);
      this.revenueChart.setOption({
        grid: {
          left: "2%",
          right: "40%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
          axisLabel: {
            color: "#ddd",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ddd",
          },
          splitLine: { lineStyle: { color: "#242837" } },
        },
        series: [
          {
            name: "应收",
            type: "line",
            areaStyle: { opacity: 0.1 },
            data: dataShould,
            smooth: true,
          },
          {
            name: "实收",
            type: "line",
            areaStyle: { opacity: 0.1 },
            data: dataShouldButNot,
            smooth: true,
            lineStyle: {
              color: "#1370FB",
            },
          },
        ],
      });
    },
    selectRevenueTable(index) {
      this.cur = index;

      this.getData(index);
      // let placeControl = document.querySelector("#revenueControl") || {};
      // let children = placeControl.children;
      // let len = children ? children.length : 0;
      // for (let i = 0; i < len; i++) {
      //   children[i].id = index == i ? "view-select-0" : "view-unselect-0";
      // }
      // this.revenueIndex = index;
      /* ------------------ 从index取list */
    },
    getData(index) {
      axios
        .post(
          "https://dda-park.com/adminApi/homePage/chargeStatistics",
          Qs.stringify({ dateType: index })
        )
        .then((res) => {
          let dataList = res.data.data;
          let xAxisData = [],
            dataShould = [],
            dataShouldButNot = [],
            listData = [];
          let dateType = dataList.dateType;

          this.sumShouldMoney = dataList.sumShouldMoney;
          this.sumRealityMoney = dataList.sumRealityMoney;
          this.sumShouldButNotMoney = dataList.sumShouldButNotMoney;
          this.countShould = dataList.countShould;
          this.countReality = dataList.countReality;
          this.countShoutButNot = dataList.countShoutButNot;

          switch (dateType) {
            case "1":
              listData = dataList.dayModelList;
              for (let i = 0; i < listData.length; i++) {
                xAxisData.push(i + "时");
                dataShould.push(listData[i].hour / 100);
                dataShouldButNot.push(listData[i].hour2 / 100);
              }
              break;
            case "2":
              listData = dataList.monthModelList;
              for (let i = 0; i < listData.length; i++) {
                xAxisData.push(i + 1 + "号");
                dataShould.push(listData[i].day / 100);
                dataShouldButNot.push(listData[i].day2 / 100);
              }
              break;
            case "3":
              listData = dataList.yearModelList;
              for (let i = 0; i < listData.length; i++) {
                xAxisData.push(i + 1 + "月");
                dataShould.push(listData[i].month / 100);
                dataShouldButNot.push(listData[i].month2 / 100);
              }
              break;
            default:
              break;
          }
          this.drawRevenue(xAxisData, dataShould, dataShouldButNot);
        });
    },
    getStatisticsData(index) {
      axios
        .post("https://dda-park.com/adminApi/homePage/parkingAreaDataStatistics",Qs.stringify({ dateType: index }))
        .then((res) => {
          let datas = res.data.data
          for (let i = 0; i < datas.length; i++) {
            let obj = {}
            obj.parkingArea = datas[i].parkingArea
            obj.parkCount = datas[i].parkCount
            obj.truckSpaceNum = datas[i].truckSpaceNum
            obj.sumRealityMoney = datas[i].sumRealityMoney
            obj.sumShouldMoney = datas[i].sumShouldMoney
            let m = [];
            for (let j in obj) {
              m.push(obj[j]);
            }
            this.config.data.push(m);
          }
          this.config = { ...this.config };

        });
    },
  },
  mounted() {
    this.getData(1);
    this.getStatisticsData(1);
  },
};
</script>

<style lang="scss" scoped>
#chart-revenue {
  width: 100%;
  height: 250px;
  margin-top: 15px;
}
.tabBtn {
  display: flex;
  color: #ddd;
  div {
    width: 110px;
    height: 40px;
    border: 1px solid #0c475d;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .active {
    background: #1370fb;
  }
}
.tuli {
  position: absolute;
  z-index: 9999;
  right: 3%;
  top: 12%;

  .legend-revenue {
    margin: 40px 20px;
    div {
      margin: 20px;
    }
    .span-round-rect,
    .span-round-rect1 {
      width: 12px;
      height: 12px;
      margin-right: 9px;
      background: #ff6060;
      display: inline-block;
    }
    .span-round-rect1 {
      background: #1370fb;
    }
  }
}

$box-height: 520px;
$box-width: 100%;
#bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
